<script setup lang="ts">
import { inject, ref, onMounted } from 'vue'
const { getIpLocation, getWeather } = inject('global') as any;
const http: any = inject('http');

interface IWeatherListModal {
  date: string;
  week: string;
  dayweather: string;
  nightweather: string;
  daytemp: string;
  nighttemp: string;
  daywind: string;
  nightwind: string;
  daypower: string;
  nightpower: string;
}

interface IProvinceItemData {
  code: string;
  name: string;
  url: string;
}

interface IPositionModal {
  city: string;
  code: string;
  province: string;
  url: string;
}

const province = ref<string>('');
const city = ref<string>('');
const weatherList = ref<IWeatherListModal[] | null>(null);
const loading = ref(true);
const provinceArr = ref<IProvinceItemData[] | null>(null);
const selectProvince = ref<string>('');
const position = ref<IPositionModal | null>(null);
const cityArr = ref<IPositionModal[] | null>(null);
const selectCity = ref<string>('');
const weatherData = ref<any>('');
const weatherUrl = ref<string>('');


getIpLocation().then((res: any) => {
  province.value = res.province;
  city.value = res.city;
  getWeather(res.adcode, 'all').then((result: any) => {
    weatherList.value = result.forecasts[0].casts as IWeatherListModal[];
    loading.value = false;
  })
})
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const getPosition = async () => {
  try {
    console.log(weatherUrl.value);

    const result: IPositionModal = await http.get(`${weatherUrl.value}/position`);
    console.log(result);

    position.value = result;
  } catch (err) {
    console.log(err);
  }
}

const getProvinceData = async () => {
  try {
    const result: IProvinceItemData[] = await http.get(`${weatherUrl.value}/province/all`);
    provinceArr.value = result;
    return result;
  } catch (err) {
    console.log(err);
  }
}

const getCityData = async (provinceCode: string) => {
  try {
    const result: IPositionModal[] = await http.get(`${weatherUrl.value}/province/${provinceCode}`);
    cityArr.value = result;
  } catch (err) {
    console.log(err);

  }
}

const getCityWeather = async (cityCode: string) => {
  try {
    const result: any = await http.get(`${weatherUrl.value}/weather`, {
      params: {
        stationid: cityCode
      }
    });
    if (result.code === 0) {
      weatherData.value = result.data;
      console.log(weatherData);

    }
    console.log(result);
  } catch (err) {
    console.log(err);

  }
}

const generateImageUrl = (index: any) => {
  return new URL(`../assets/img/${index}.jpg`, import.meta.url).href;
}

const generateWeatherInfo = (dayInfo: string, nightInfo: string) => {
  if (dayInfo === nightInfo) {
    return dayInfo;
  } else {
    return `${dayInfo} 转 ${nightInfo}`;
  }
}

const selectProvinceHandle = (val: any) => {
  getCityData(val);
  selectCity.value = '';
}

const selectCityHandle = (val: any) => {
  getCityWeather(val);
}

onMounted(async () => {
  console.log(import.meta.env.MODE);
  // if (import.meta.env.MODE === 'development') {
  //   weatherUrl.value = '/rest';
  // } else {
  //   weatherUrl.value = 'https://yyf.ylmlove.site/rest'
  // }
  weatherUrl.value = '/rest';
  await getProvinceData();
  await getPosition();
  const selectProvinceObj = provinceArr.value?.find((item: IProvinceItemData) => item.name === position.value?.province);
  selectProvince.value = selectProvinceObj?.code as string;
  await getCityData(selectProvince.value);
  selectCity.value = position.value?.code as string;
  getCityWeather(selectCity.value);
})

</script>

<template>
  <main v-loading="loading">
    <!-- <el-table :data="weatherList" style="width: 100%" size="large">
      <el-table-column prop="date" label="日期" />
      <el-table-column prop="week" label="星期几" />
      <el-table-column prop="dayweather" label="白天天气现象" />
      <el-table-column prop="nightweather" label="晚上天气现象" />
      <el-table-column prop="daytemp" label="白天温度" />
      <el-table-column prop="nighttemp" label="晚上温度" />
      <el-table-column prop="daywind" label="白天风向" />
      <el-table-column prop="nightwind" label="晚上风向" />
      <el-table-column prop="daypower" label="白天风力" />
      <el-table-column prop="nightpower" label="晚上风力" />
    </el-table> -->
    <el-card style="width: 100%">
      <template #header>
        <h1>城市天气预报</h1>
      </template>
      <div class="cityWeatherReport">
        <div class="header">
          <div class="province">
            <span>省份： </span>
            <el-select filterable v-model="selectProvince" placeholder="Select" style="width: 240px"
              @change="selectProvinceHandle">
              <el-option v-for="item in provinceArr" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </div>
          <div class="city">
            <span>城市： </span>
            <el-select filterable v-model="selectCity" placeholder="Select" style="width: 240px" @change="selectCityHandle">
              <el-option v-for="item in cityArr" :key="item.code" :label="item.city" :value="item.code" />
            </el-select>
          </div>
        </div>
        <div class="content">
          <div class="today">
            <div class="left">
              <div class="location">
                <el-icon>
                  <Location />
                </el-icon>
                <span class="area">{{ weatherData.real?.station?.city }}</span>
              </div>
              <div class="template">{{ weatherData.real?.weather?.temperature }}</div>
            </div>
            <div class="right">
              <p class="day item">
                白天 {{ `${weatherData.predict?.detail[0]?.day.weather.info}
                ${weatherData.predict?.detail[0].day.weather.temperature}℃
                ${weatherData.predict?.detail[0].day.wind.power}`
                }}
              </p>
              <p class="night item">
                夜间 {{ `${weatherData.predict?.detail[0].night.weather.info}
                ${weatherData.predict?.detail[0].night.weather.temperature}℃
                ${weatherData.predict?.detail[0].night.wind.power}` }}
              </p>
              <p class="rain item">
                降水量 {{ weatherData.real?.weather.rain }}mm
              </p>
              <p class="wind item">
                {{ `${weatherData.real?.wind.direct} ${weatherData.real?.wind.power}` }}
              </p>
              <p class="humidity item">
                相对湿度 {{ weatherData.real?.weather.humidity }}%
              </p>
              <p class="feelst item">
                体感温度 {{ weatherData.real?.weather.feelst }}
              </p>
            </div>
            <!-- ${item.night.weather.img} ../assets/img/0.jpg -->
          </div>
          <el-row style="width: 80%;">
            <el-col :span="4" v-for="(item, i) in weatherData.predict?.detail.slice(1, 7) " :key="item.date">
              <div class="wbg" :style="i === 6 ? 'margin-right: 0;' : ''">
                <div class="date">{{ item.date }}</div>
                <div class="weathericon"><img :src="generateImageUrl(item.day.weather.img)">&nbsp;&nbsp;&nbsp;<img
                    :src="generateImageUrl(item.night.weather.img)"></div>
                <div class="desc">{{
    generateWeatherInfo(item.day.weather.info, item.night.weather.info)
  }}</div>
                <div class="tmp weather-very-hot">{{ item.day.weather.temperature }}/{{ item.night.weather.temperature
                  }}℃
                </div>
                <div class="windd"> {{ item.day.wind.power }}</div>
              </div>
            </el-col>
          </el-row>
        </div>

      </div>
    </el-card>
    <el-card style="width: 100%; margin-top: 20px;">
      <template #header>
        <h1>中央气象台</h1>
      </template>
      <div class="iframe-container">
        <iframe src="https://weather.cma.cn/web/channel-339.html" width="100%" height="400" frameborder="0"></iframe>
      </div>
    </el-card>
  </main>
</template>

<style lang="less" scoped>
.cityWeatherReport {
  width: 100%;

  .header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;

    .province {
      padding-right: 20px;
    }
  }

  .content {
    background: url('../assets/img/hwbg.png');
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    display: flex;

    .today {
      flex: 1;
      display: flex;

      .left {
        width: 20%;
        padding-right: 4rem;

        .location {
          display: flex;
          align-items: center;
          cursor: pointer;
          font-size: 0.8rem;

          .area {
            padding-left: 1rem;
          }
        }

        .template {
          font-size: 2rem;
          font-weight: bold;
        }
      }

      .right {
        .item {
          line-height: 1.9;
          font-size: 0.9rem;
        }
      }
    }

    .wbg {
      background-color: #ceedff;
      border-radius: 5px;
      padding: 1rem;
      text-align: center;
      color: #000;
      margin-right: 1rem;
      font-size: 0.9rem;

      .date {}

      .weathericon {
        height: auto;
      }

      .tmp {
        color: #ee4141;
      }

      :last-child {
        margin-right: 0;
      }
    }

    // &:last-child {
    //   margin-right: 0;
    // }
  }
}

.el-row {
  margin-bottom: 2rem;
  font-size: 1rem;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 3.6rem;
}


.iframe-container {
  position: relative;
  width: 100%;
  /* 让容器宽度自适应 */
  padding-top: 56.25%;
  /* 保持16:9的宽高比，即9/16*100% */
  overflow: hidden;
  /* 隐藏超出的内容 */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border: none;
  /* 移除边框 */
  transform: scale(0.95);
  transform-origin: 0% 0%;
}

@media screen and (max-width: 1800px) {
  .iframe-container iframe {
    width: 120vw;
    height: 1000px;
    transform: scale(0.8);
  }
}

@media screen and (max-width: 1500px) {
  .right {
    .item {
      line-height: 1.9 !important;
      font-size: 0.8rem !important;
    }
  }

  .iframe-container {
    position: relative;
    width: 100%;
    /* 让容器宽度自适应 */
    padding-top: 60%;
    /* 保持16:9的宽高比，即9/16*100% */
    overflow: hidden;
    /* 隐藏超出的内容 */
  }

  .iframe-container iframe {
    width: 140vw;
    height: 950px;
    transform: scale(0.6);
  }
}

@media screen and (max-width: 1120px) {
  .right {
    .item {
      line-height: 1.7 !important;
      font-size: 0.8rem !important;
    }
  }

  .iframe-container {
    position: relative;
    width: 100%;
    /* 让容器宽度自适应 */
    padding-top: 65%;
    /* 保持16:9的宽高比，即9/16*100% */
    overflow: hidden;
    /* 隐藏超出的内容 */
  }

  .iframe-container iframe {
    width: 160vw;
    height: 950px;
    transform: scale(0.5);
  }
}

@media screen and (max-width: 975px) {
  .right {
    .item {
      line-height: 1.7 !important;
      font-size: 0.8rem !important;
    }
  }


  .iframe-container {
    position: relative;
    width: 100%;
    /* 让容器宽度自适应 */
    padding-top: 70%;
    /* 保持16:9的宽高比，即9/16*100% */
    overflow: hidden;
    /* 隐藏超出的内容 */
  }

  .iframe-container iframe {
    width: 180vw;
    height: 1100px;
    transform: scale(0.4);
  }
}

@media screen and (max-width: 820px) {
  .right {
    .item {
      line-height: 1.7 !important;
      font-size: 0.7rem !important;
    }
  }


  .iframe-container {
    position: relative;
    width: 100%;
    /* 让容器宽度自适应 */
    padding-top: 80%;
    /* 保持16:9的宽高比，即9/16*100% */
    overflow: hidden;
    /* 隐藏超出的内容 */
  }

  .iframe-container iframe {
    width: 220vw;
    transform: scale(0.3);
  }
}
</style>
